{% extends "base.html" %}
{% import "_my_wtf_macros.html" as my_wtf_macros %}

{% block title %}万屏时代报价工具--审核产品{% endblock %}

{% block panel_heading %}万屏时代报价工具--审核产品{% endblock %}

{% block panel_body %}
    {% with for_new = False if draft.product_template_id else True %}
        <div class="well well-sm">
            基本信息
            {% if not for_new %}
                <div class="pull-right btn-group">
                    <a href="#" id="sync-draft-brand"
                       class="btn btn-xs btn-success"
                       style="margin-right: 5px;" target="_self">
                        同步品牌
                    </a>
                </div>
            {% endif %}
        </div>
        <div class="row container">
            <label class="col-xs-1 control-label">品牌</label>
            <label>{{ draft.product_info.brand }}</label>
        </div>
        <br>
        <div class="well well-sm">
            产品图片
            {% if not for_new %}
                <div class="pull-right btn-group">
                    <a href="#" id="sync-draft-pictures"
                       class="btn btn-xs btn-success"
                       style="margin-right: 5px;" target="_self">
                        同步图片
                    </a>
                </div>
            {% endif %}
        </div>
        <div id="image-container">
            <div class="row">
                {% with pictrtes = (draft.product_info.pictures | json_loads) %}
                    {# 当前产品图片 #}
                    {% for img in current_pictures or [] %}
                        <div class="col-xs-3 col-md-2">
                            <a href="#"
                               class="thumbnail image-wrapper bg-green-active"
                               data-img_url="{{ img }}">
                                <img src="{{ img }}">
                            </a>
                        </div>
                    {% endfor %}
                    {# 新增图片 #}
                    {% for img in pictrtes %}
                        {% if img not in current_pictures %}
                            <div class="col-xs-3 col-md-2">
                                <a href="#" class="thumbnail image-wrapper"
                                   data-img_url="{{ img }}">
                                    <img src="{{ img }}">
                                </a>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endwith %}
            </div>
        </div>
        <div class="well well-sm">技术参数</div>
        <table id="other-params-table"
               class="table table-bordered table-hover table-condensed table-striped">
            <thead>
            <tr>
                <th>参数名</th>
                <th>当前值</th>
                <th>新值</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for each in param_info %}
                {% with for_update = each.id in param_mapping %}
                    <tr>
                        <td>
                            {% if each.parent_id in technology_param_mapping %}
                                ({{ technology_param_mapping[each.parent_id].name }})
                            {% endif %}
                            {% if each.technology_param_id in technology_param_mapping %}
                                {{ technology_param_mapping[each.technology_param_id].name }}
                            {% endif %}
                        </td>
                        <td>
                            {% if for_update %}
                                {{ param_mapping[each.id].value }}
                            {% endif %}
                        </td>
                        <td class="text-light-blue">{{ each.value }}</td>
                        <td>
                            {% if for_update and param_mapping[each.id].value != each.value and not for_new %}
                                <a
                                        class="btn btn-group btn-xs btn-primary sync-draft-param"
                                        href="#"
                                        data-param_id={{ each.id }}
                                                data-value={{ each.value }}
                                >
                                    同步
                                </a>
                            {% endif %}
                        </td>
                    </tr>
                {% endwith %}
            {% endfor %}
            </tbody>
        </table>
        <br>
        <div class="well well-sm">
            规格参数
            {% if not for_new %}
                <div class="pull-right btn-group">
                    <a href="#" id="sync-draft-specs"
                       class="btn btn-xs btn-success"
                       style="margin-right: 5px;" target="_self">
                        同步规格
                    </a>
                </div>
            {% endif %}
        </div>
        <table id="other-params-table"
               class="table table-bordered table-hover table-condensed table-striped">
            <thead>
            <tr>
                <th>规格名</th>
                <th>选项值</th>
                <th>已选值</th>
            </tr>
            </thead>
            <tbody>
            {% for each in draft.product_info.spec_settings %}
                <tr>
                    <td>
                        {{ each.name }}
                    </td>
                    <td>
                        {{ each.options }}
                    </td>
                    <td class="text-light-blue">{{ each['values'] }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <br>
        <div class="well well-sm">审核信息</div>

        <form id="draft-approval-form"
                {% if for_new %}
              action="{{ url_for('product_bp.close_product_draft_for_new', draft_id=draft.id) }}"
                {% else %}
              action="{{ url_for('product_bp.close_product_draft', draft_id=draft.id) }}"
                {% endif %}
              method="post"
              class="form" role="form">
            {{ form.hidden_tag() }}

            {{ my_wtf_macros.form_field(form.remark, div_col=12, label_col=1, field_col=9) }}
            <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

            <div class="pull-right">
                <button type="button" class="btn btn-success"
                        id="close-draft-approval"
                        onclick="set_status(51)"
                >
                    结束审核
                </button>
                <button type="button" class="btn btn-danger"
                        id="refuse-draft-approval"
                        onclick="set_status(11)"
                >
                    拒绝
                </button>
            </div>
        </form>

    {% endwith %}
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        function set_status(status) {

            $('#status').val(status);
            $('#draft-approval-form').submit();
        }
        $(document).ready(function () {
            var select_count = {{ current_pictures and  andcurrent_pictures | length or 0 }};
            var select_imgs = {{ current_pictures and current_pictures | safe or [] }};
            // 图片选择
            $('#image-container .image-wrapper').click(function () {
                var selected = $(this).hasClass('bg-green-active');
                if (selected) {
                    select_count -= 1;
                    var index = select_imgs.indexOf($(this).data('img_url'));
                    select_imgs.splice(index, 1);
                    $(this).removeClass('bg-green-active');
                } else {
                    if (select_count >= 9) {
                        alert('最多只能展示9张图片');
                        return
                    }
                    select_count += 1;
                    select_imgs.push($(this).data('img_url'));
                    $(this).data('img_count', select_count);
                    $(this).addClass('bg-green-active');

                }
            });
            // 同步图片
            $('#sync-draft-pictures').click(function () {
                $.ajax({
                    type: 'PUT',
                    url: '{{ url_for('product_bp.ajax_sync_draft_pictures', template_id=draft.product_template_id or 0) }}',
                    contentType: "application/json",
                    data: JSON.stringify({
                        'pictures': select_imgs
                    }),
                    success: function (data) {
                        location.reload();
                    },
                    error: function () {
                        alert('Unexpected error');
                    }
                });
            });

            // 同步技术参数
            $('.sync-draft-param').click(function () {
                var value = $(this).data('value');
                var param_id = $(this).data('param_id');
                $.ajax({
                    type: 'PUT',
                    url: '{{ url_for('product_bp.ajax_sync_draft_param') }}',
                    contentType: "application/json",
                    data: JSON.stringify({
                        'value': value,
                        'param_id': param_id
                    }),
                    success: function (data) {
                        location.reload();
                    },
                    error: function () {
                        alert('Unexpected error');
                    }
                });
            });

            // 同步规格
            $('#sync-draft-specs').click(function () {
                var spec_settings = {{ draft.product_info.spec_settings | safe or []}};
                $.ajax({
                    type: 'PUT',
                    url: '{{ url_for('product_bp.ajax_sync_draft_spec', template_id=draft.product_template_id or 0) }}',
                    contentType: "application/json",
                    data: JSON.stringify({
                        'spec_settings': spec_settings
                    }),
                    success: function (data) {
                        location.reload();
                    },
                    error: function () {
                        alert('Unexpected error');
                    }
                });
            });

            // 同步品牌
            $('#sync-draft-brand').click(function () {
                var brand_id = {{ draft.product_info.brand_id}};
                $.ajax({
                    type: 'PUT',
                    url: '{{ url_for('product_bp.ajax_sync_draft_brand', template_id=draft.product_template_id or 0) }}',
                    contentType: "application/json",
                    data: JSON.stringify({
                        'brand_id': brand_id
                    }),
                    success: function (data) {
                        location.reload();
                    },
                    error: function () {
                        alert('Unexpected error');
                    }
                });
            });
        })
    </script>
{% endblock %}